<template>
  <div class="home">
    <!--头部-->
    <div class="header">
    </div>
    <div class="home_content">
      <!--菜单-->
      <div class="menu" :style="{ width: `${menuWidth}px` }">
        <el-menu default-active="0" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened
          :collapse="isCollapse">
          <template v-for="(item, index) in menus">
            <el-submenu :index="`${index}`" :key="index" v-if="item.children.length > 0">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(item1, index1) in item.children" :key="index1" :index="`${index}-${index1}`"
                  @click="toPage(item, item1)">{{ item1.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item :index="`${index}`" :key="index" v-else @click="toPage(item, '')">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="right">
        <!--面包屑-->
        <div class="breadcrumb">
          <i :class="collapseIcon" @click="handleCollapse"></i>
          <el-breadcrumb separator="/" class="ml10">
            <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!--内容-->
        <div class="content">
          <el-card>
            <router-view />
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      menus: [
        {
          code: 'home',
          url: '/',
          name: '主页',
          component: "/index/index",
          icon: 'el-icon-s-home',
          children: []
        },
        {
          code: 'video',
          url: '/video',
          name: '视频播放',
          component: "",
          icon: 'el-icon-video-camera',
          children: [
            {
              code: 'videoJs',
              url: '/video/videoJs',
              name: 'videoJs',
              component: "/video/videoJs",
              icon: '',
              children: []
            },
            {
              code: 'xgPlayer',
              url: '/video/xgPlayer',
              name: 'xgPlayer',
              component: "/video/xgPlayer",
              icon: '',
              children: []
            },
          ]
        },
        {
          code: 'components',
          url: '/components',
          name: '实用组件',
          component: "",
          icon: 'el-icon-s-home',
          children: [
            {
              code: 'division',
              url: '/components/division',
              name: '副标题',
              component: "/components/division",
              icon: 'el-icon-s-home',
              children: []
            }, {
              code: 'barcode',
              url: '/components/barcode',
              name: '条形码',
              component: "/components/barcode",
              icon: 'el-icon-s-home',
              children: []
            }, {
              code: 'qrcode',
              url: '/components/qrcode',
              name: '二维码',
              component: "/components/qrcode",
              icon: 'el-icon-s-home',
              children: []
            },{
              code: 'zDateRange',
              url: '/components/zDateRange',
              name: '日期范围',
              component: "/components/zDateRange",
              icon: 'el-icon-s-home',
              children: []
            },
          ]
        },
        {
          code: 'table',
          url: '/table',
          name: '表格相关',
          component: "",
          icon: 'el-icon-s-home',
          children: [
            {
              code: 'mergeTableCell',
              url: '/table/mergeTableCell',
              name: '合并单元格',
              component: "/table/mergeTableCell",
              icon: 'el-icon-s-home',
              children: []
            },
          ]
        },{
          code: 'tools',
          url: '/tools',
          name: '工具类',
          component: "/tools/index",
          icon: 'el-icon-s-home',
          children: []
        },
      ],
      isCollapse: false, //左侧菜单是否收缩
      menuWidth: 200,// 左侧菜单宽度
      collapseIcon: 'el-icon-s-fold', // 收缩图标
      breadcrumb: [`主页`], //当前url对应的面包屑
    };
  },
  computed: {},
  created() {
    console.log(this.$route.path)
  },
  methods: {
    // 跳转到对应页面
    toPage(data, data1) {
      this.breadcrumb = [];
      // todo 如果已经是当前页面了  就不需要跳转了
      if (data1) {
        this.$router.push(data1.url);
        this.breadcrumb.push(data.name, data1.name);
      } else {
        this.$router.push(data.url);
        this.breadcrumb.push(data.name);
      }
    },
    // 收起/展开左侧菜单
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.menuWidth = this.isCollapse ? 64 : 200;
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../assets/style/variables.scss";

.home {
  height: 100%;

  .header {
    background-color: #222d33;
    height: 60px;
    color: #FFFFFF;
  }

  .home_content {
    height: calc(100% - 60px);
    display: flex;

    .menu {
      //width: 200px;
      transition: width 0.5s;
      display: inline-block;
      height: 100%;
      overflow: auto;
    }

    .right {
      flex: 1;

      .breadcrumb {
        background-color: #fff;
        width: 100%;
        height: 34px;
        display: flex;
        align-items: center;
        z-index: 100;
        box-shadow: 0 4px 5px 0 rgba(6, 0, 1, .05);

        ::v-deep .el-icon-s-fold,
        .el-icon-s-unfold {
          color: $theme-color;
          font-size: 30px;
          cursor: pointer;
        }
      }

      .content {
        width: 100%;
        padding: 20px;
      }
    }
  }
}

::v-deep .el-menu {
  border-right: none;
}

::v-deep .el-submenu__title,
.el-menu-item {
  text-align: left;
}

::v-deep .el-menu-item-group__title {
  padding: 0;
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 25px 0 60px !important;
}</style>
